<template>
    <div id="pmw_czrz">
        <!--选项卡插件-->
        <el-tabs id="p_czrz_box" type="border-card">
            <el-tab-pane label="操作日志">
                <div class="p_table">
                    <el-table
                        :data="searchData"
                        style="width: 100%"
                        :default-sort = "{prop: 'id', order: 'ascending'}"
                        height="500"
                        :stripe=true
                        :border=true
                        :header-cell-style="{backgroundColor:'#409EFF',textAlign:'center',color:'white'}"
                        :cell-style="{textAlign:'center'}"
                >
                    <el-table-column
                            prop="id"
                            label="编号"
                            sortable
                            min-width="20%">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            min-width="20%">
                    </el-table-column>
                    <el-table-column
                            prop="date"
                            sortable
                            label="日期"
                            min-width="20%">
                    </el-table-column>
                    <el-table-column
                            prop="time"
                            sortable
                            label="时间"
                            min-width="20%">
                    </el-table-column>
                    <el-table-column
                            prop="action"
                            label="事件"
                            min-width="20%">
                    </el-table-column>
                </el-table>
                </div>
            </el-tab-pane>
        </el-tabs>
        <!--搜索框部分-->
        <div class="p_search clear">
            <div><el-input v-model="searchValue" placeholder="请输入员工编号"></el-input></div>
            <div><el-button type="primary">搜索</el-button></div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "pmw_czrz",
        data() {
            return {
                searchValue: '',
                searchData:[],
            }
        },
        methods:{

        },
        created() {
            axios({
                url:'http://123.57.67.148:3000/mock/40/czrz',
                method:'get'
            }).then(res=>{
                this.searchData=res.data.data;
            })
        }
    }
</script>

<style scoped lang="less">
    .el-button--primary{
        height: 40px;
        padding: 0 20px;
    }
    *{
        margin: 0;
        padding: 0;
    }
    .clear:after{
        content: '';
        clear: both;
        display: block;
    }
    #pmw_czrz{
        position: relative;
        padding: 20px;
        /*选项卡*/
        #p_czrz_box{
            .p_table{
                padding:25px 50px;
            }
        }
        /*搜索框*/
        .p_search{
            position: absolute;
            top: 20px;
            right: 20px;
            padding-right: 5px;
            &>div{
                float: left;
                margin-left: 10px;
            }
            div:first-child{
                width: 130px;
            }
        }
    }
</style>
